import { createRouter, createWebHistory, type RouteRecordRaw } from "vue-router";

const routes: Readonly<RouteRecordRaw[]> = [
  {
    path: "/",
    component: () => import("@/routes/home"),
    meta: { title: "Home" },
  },
  {
    path: "/audio/recorder",
    component: () => import("@/routes/audio/recorder"),
    meta: { title: "Audio Recorder" },
  },
  {
    path: "/components",
    component: () => import("@/routes/components"),
    meta: { title: "Components" },
  },
  {
    path: "/demo",
    children: [
      {
        path: "",
        component: () => import("@/routes/demo"),
        meta: { title: "Demo" },
      },
      {
        path: "dom",
        component: () => import("@/routes/demo/dom"),
        meta: { title: "DOM" },
      },
      {
        path: "error",
        component: () => import("@/routes/demo/error"),
        meta: { title: "Error" },
      },
      {
        path: "joke",
        component: () => import("@/routes/demo/joke"),
        meta: { title: "Joke" },
      },
      {
        path: "load-data",
        component: () => import("@/routes/demo/load-data"),
        meta: { title: "Load Data" },
      },
    ],
  },
  {
    path: "/login",
    component: () => import("@/routes/login/index"),
    meta: { title: "Login" },
  },
  {
    path: "/:pathMatch(.*)*",
    name: "NotFound",
    component: () => import("@/routes/_404"),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.afterEach((to) => {
  document.title = (to.meta.title as string) || "";
});

export default router;
